<template>
  <div id="orderPayment">
    <div class="orderPaymentwapper">
      <div class="orderPayment_box">
        <div class="order_list">
          <p
            class="actual_pay"
            v-if="getPhoneOrderInfoData?getPhoneOrderInfoData.orderStatusId:''=='3'"
          >{{getPhoneOrderInfoData?getPhoneOrderInfoData.orderStatus:''}}</p>
          <p class="actual_pay" v-else>{{getPhoneOrderInfoData?getPhoneOrderInfoData.payStatus:''}}</p>
          <p class="actual_pay">
            共
            <span>{{orderAmt}}</span>
            元
          </p>
          <p class="coupon_change">
            <span @click="getchargesDetails">
              查看费用明细
              <img src="@/assets/imgs/arrow_right.png" />
            </span>
          </p>
          <p class="detail_hx"></p>
          <p class="detail-head">
            <md-icon name="snkc_xcqx_time" slot="left" class="snkc_xcqx_time"></md-icon>
            <b>{{getPhoneOrderInfoData?getPhoneOrderInfoData.departureTime:''}}</b>
            <span
              v-if="(getPhoneOrderInfoData?getPhoneOrderInfoData.orderType:'') == '拼车'"
            >{{orderNum}}人{{getPhoneOrderInfoData?getPhoneOrderInfoData.orderType:''}}</span>
            <span v-if="(getPhoneOrderInfoData?getPhoneOrderInfoData.orderType:'') == '包车'">{{getPhoneOrderInfoData?getPhoneOrderInfoData.carType:''}}</span>
            <span v-show="speedstatus">走高速</span>
          </p>
          <ul class="detail_list">
            <li>
              <md-icon name="shangchedian" slot="left" class="shangchedian"></md-icon>
              <span>{{getstartRoute}} . {{getorigin}}</span>
            </li>
            <li>
              <md-icon name="xiachedian" slot="left" class="shangchedian"></md-icon>
              <span>{{getendRoute}} . {{getdestination}}</span>
            </li>
            <li v-show="Isorder_type">
              <md-icon name="snkc_xcqx_dj" slot="left" class="snkc_xcqx_time"></md-icon>
              <span>{{getPhoneOrderInfoData?getPhoneOrderInfoData.orderUserName:''}} {{userPhone}}</span>
            </li>
            <li v-show="Isremarks">
              <md-icon name="dt_bz" slot="left" class="snkc_xcqx_time"></md-icon>
              <span>{{getPhoneOrderInfoData?getPhoneOrderInfoData.remarks:''}}</span>
            </li>
          </ul>
        </div>
        <p class="orderPayBtn" @click="orderPay" v-show="isorderPay">立即支付</p>
        <md-popup v-model="payBox" position="bottom">
          <md-popup-title-bar title="支付车费" cancel-text="取消" @cancel="cancelPayBox"></md-popup-title-bar>
          <div class="pay_box_ct">
            <p class="pay_box_amt_hd">
              订单金额
              <span>{{orderAmt}}元</span>
            </p>
            <p class="pay_box_text">实际支付金额</p>
            <p class="pay_box_amt">
              ¥
              <span>{{orderAmt}}</span>
            </p>
            <div class="payType">
              <ul class="choice-payment-method">
                <li @click="wechatMethod" v-show="isWxBrowser">
                  <img src="@/assets/imgs/cz_wx_icon@2x.png" />
                  <span>微信支付</span>
                  <b>
                    <i class="choice-payment-right" :class="{active:paymentMethod == 'wechat'||paymentMethod=='h5wx'}"></i>
                  </b>
                </li>
                <li @click="alipayMethod" v-show="isAlipayBrowser">
                  <img src="@/assets/imgs/cz_zfb_icon@2x.png" />
                  <span>支付宝支付</span>
                  <b>
                    <i class="choice-payment-right" :class="{active:paymentMethod == 'alipay'}"></i>
                  </b>
                </li>
              </ul>
            </div>
            <p class="orderPayBtns" @click="paySubmit">确认支付</p>
          </div>
        </md-popup>
      </div>
    </div>
    <md-dialog title="确认" :closable="false" v-model="actDialog.open" :btns="actDialog.btns">请确认支付是否已经完成</md-dialog>
  </div>
</template>

<script>
import '@/assets/svgs/shangchedian.svg';
import '@/assets/svgs/xiachedian.svg';
import '@/assets/svgs/snkc_xcqx_time.svg';
import '@/assets/svgs/dt_bz.svg';
import '@/assets/svgs/snkc_xcqx_dj.svg';
import '@/assets/svgs/xc_question.svg';
import '@/assets/svgs/Fill.svg';
import '@/assets/svgs/tishi.svg';
import { Icon, Field, FieldItem, Toast, Radio, Popup, PopupTitleBar, NumberKeyboard, Dialog } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import { Base64 } from 'js-base64';
import http from '@/common/http';
import { mapGetters, mapActions, mapMutations } from 'vuex';
import Utils from '@/common/pakjUtils';
import WxUtils from '@/common/weixinUtils';
import { loadavg } from 'os';
var CryptoJS = require('crypto-js');
var moment = require('moment');
moment.locale('zh-cn');
const STORAGE_CALLED_PAY = 'CALLED_PAY';
const STORAGE_ORDER_NO = 'ORDER_NO';
export default {
  components: {
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [Radio.name]: Radio,
    [Popup.name]: Popup,
    [Dialog.name]: Dialog,
    [PopupTitleBar.name]: PopupTitleBar,
    [NumberKeyboard.name]: NumberKeyboard,
    [FieldItem.name]: FieldItem
  },
  data() {
    return {
      title: '订单支付',
      paymentMethod: '',
      PaymentStatusTimer: '',
      isWxBrowser: false,
      isAlipayBrowser: false,
      orderNo: undefined,
      Isorder_type: true, // 是否显示乘车人
      Isremarks: true, // 是否显示大件行李
      speedstatus: false,
      payBox: false,
      isorderPay: true,
      actDialog: {
        open: false,
        btns: [
          {
            text: '重新支付',
            handler: this.onActCancel
          },
          {
            text: '已完成支付',
            handler: this.onActConfirm
          }
        ]
      }
    };
  },
  created() {
    // 检测当前浏览器环境
    console.log(Utils.getBrowserType());
    const orderno = this.$route.query.orderno;
    if (Utils.getBrowserType() === 'wxBrowser') {
      this.isWxBrowser = true;
      this.isAlipayBrowser = false;
      this.paymentMethod = 'wechat';
    } else if (Utils.getBrowserType() === 'AlipayBrowser') {
      this.isAlipayBrowser = true;
      this.isWxBrowser = false;
      this.paymentMethod = 'alipay';
    } else if (Utils.getBrowserType() === 'otherBrowser') {
      this.isWxBrowser = true;
      this.isAlipayBrowser = true;
      this.paymentMethod = 'h5wx';
    }

    if (orderno) {
      this.orderNo = orderno;
    } else {
      let orderno = localStorage.getItem(STORAGE_ORDER_NO);
      if (orderno) {
        this.orderNo = orderno;
      } else {
        Dialog.alert({
          title: '错误',
          content: '找不到订单号',
          confirmText: '确定'
        });
        return;
      }
    }
    this.queryPhoneOrderInfo();
    let calledPay = localStorage.getItem(STORAGE_CALLED_PAY);
    if (calledPay === '1') {
      this.actDialog.open = true;
    }
    // 检测是否拉起支付窗口
    if (this.$route.name === 'PhoneOrderPaymentPay') {
      this.payBox = true;
    } else {
      this.payBox = false;
    }
  },
  methods: {
    ...mapActions(['phoneOrderWxPayment', 'getPhoneOrderInfo', 'h5PhonePayment']),
    ...mapMutations(['resetOrder']),
    // 查询订单信息
    queryPhoneOrderInfo() {
      this.getPhoneOrderInfo(this.orderNo).then(() => {
        // 是否显示乘车人
        if (this.getPhoneOrderInfoData.is_self === '0') {
          this.Isorder_type = false;
        }
        // 是否显示大件行李
        if (this.getPhoneOrderInfoData.remarks === '') {
          this.Isremarks = false;
        }
        // 是否显示走高速
        if (this.getPhoneOrderInfoData.speedStatus === '1') {
          this.speedstatus = true;
        }
        let orderStatusId = this.getPhoneOrderInfoData.orderStatusId;
        if (orderStatusId === '2' || orderStatusId === '3') {
          this.isorderPay = false;
        }
        // 是否显示支付按钮
        let payStatusId = this.getPhoneOrderInfoData.payStatusId;
        if (payStatusId === '1' || payStatusId === '2' || payStatusId === '3' || payStatusId === '4') {
          this.isorderPay = false;
        } else {
          console.log(this.getOpenId);
          if (this.paymentMethod === 'wechat' && !this.getOpenId) {
            const storeObj = {
              orderno: this.orderNo
            };
            localStorage.setItem('PhoneOrderPayInfo', JSON.stringify(storeObj));
            WxUtils.startWxAuth('PhoneOrderWxPayment');
          }
        }
      });
    },
    // 拉起支付
    orderPay() {
      if (this.getPhoneOrderInfoData.orderStatusId === '2') {
        Dialog.alert({
          title: '提示',
          content: '订单已完成',
          confirmText: '确定'
        });
      } else if (this.getPhoneOrderInfoData.orderStatusId === '3') {
        Dialog.alert({
          title: '提示',
          content: '订单已取消',
          confirmText: '确定'
        });
      } else {
        this.payBox = true;
        this.$router.push({
          name: 'PhoneOrderPaymentPay',
          query: {
            orderno: this.orderNo
          }
        });
      }
    },
    // 费用明细
    getchargesDetails() {
      this.$router.push({
        name: 'chargesPhoneOrderDetails',
        query: {
          orderno: this.orderNo
        }
      });
    },
    cancelPayBox() {
      this.payBox = false;
      this.$router.push({
        name: 'PhoneOrderPayment',
        query: {
          orderno: this.orderNo
        }
      });
    },
    // 微信支付
    wechatMethod() {
      switch (Utils.getCurrentEnv()) {
        case 'wx':
          this.paymentMethod = 'wechat';
          break;
        case 'h5':
          this.paymentMethod = 'h5wx';
          break;
      }
    },
    // 支付宝支付
    alipayMethod() {
      this.paymentMethod = 'alipay';
    },
    paySubmit() {
      if (this.paymentMethod === 'wechat') {
        console.info('使用微信公众号支付');
        // 选择微信支付
        let p = {
          order_no: this.orderNo,
          pay_type: '1001',
          open_id: this.getOpenId,
          phoneUrl: window.location.href
        };
        this.phoneOrderWxPayment(p)
          .then(() => {
            let params = this.getWXPaymentInfoData.JSPParam;
            wx.config({
              debug: false,
              appId: params['appId'],
              timestamp: params['timestamp'],
              nonceStr: params['noncestr'],
              signature: params['signature'],
              jsApiList: ['chooseWXPay']
            });
            wx.ready(() => {
              wx.chooseWXPay({
                timestamp: params['timestamp'],
                nonceStr: params['noncestr'],
                package: 'prepay_id=' + params['package'], // TODO May need remove 'prepay\_id='
                signType: 'MD5', // TODO If this didn't work . Use 'SHA1'.
                paySign: params['paySign'],
                success: res => {
                  if (res.errMsg === 'chooseWXPay:ok') {
                    this.cancelPayBox();
                    Loading.show('正在检查支付状态');
                    setTimeout(() => {
                      this.queryPhoneOrderInfo();
                      Loading.hide();
                    }, 2000);
                  }
                },
                fail: res => {
                  this.queryPaymentStatus(); // 查询支付状态
                  // this.$store
                  //     .dispatch('checkPaymentStatus', this.orderNo)
                  //     .then(() => {
                  //         this.queryPhoneOrderInfo();
                  //         this.isorderPay = false;
                  //     })
                  //     .catch(reason => {
                  //         Dialog.alert({
                  //             title: '错误',
                  //             content: '支付失败',
                  //             confirmText: '确定'
                  //         });
                  //     });
                }
              });
            });
          })
          .catch(reason => {
            if (reason.message === '200008') {
              this.queryPhoneOrderInfo();
              this.isorderPay = false;
            } else {
              Dialog.alert({
                title: '错误',
                content: '支付失败',
                confirmText: '确定'
              });
            }
          });
      } else if (this.paymentMethod === 'alipay') {
        console.log('使用支付宝支付');
        let parameters = {
          order_no: this.orderNo,
          pay_type: '1002',
          phoneUrl: window.location.origin + '/phoneorder/payment' + '?orderno=' + this.$route.query.orderno
        };
        this.h5PhonePayment(parameters)
          .then(() => {
            localStorage.setItem(STORAGE_ORDER_NO, this.orderNo);
            localStorage.setItem(STORAGE_CALLED_PAY, '1');
            let htmlStr = this.getH5honePaymentInfo.AlipayBody;
            const div = document.createElement('div'); // 创建div
            div.innerHTML = htmlStr; // 将返回的form 放入div
            document.body.appendChild(div);
            document.forms[0].submit();
          })
          .catch(reason => {
            if (reason.message === '200008') {
              this.queryPhoneOrderInfo();
              this.isorderPay = false;
            } else {
              Dialog.alert({
                title: '错误',
                content: '支付失败',
                confirmText: '确定'
              });
            }
          });
      } else if (this.paymentMethod === 'h5wx') {
        console.info('使用H5微信支付');
        let p = {
          order_no: this.orderNo,
          pay_type: '1001',
          phoneUrl: window.location.origin + '/phoneorder/payment' + '?orderno=' + this.$route.query.orderno // 电话约单H5回调
        };
        this.h5PhonePayment(p)
          .then(() => {
            localStorage.setItem(STORAGE_ORDER_NO, this.orderNo);
            localStorage.setItem(STORAGE_CALLED_PAY, '1');
            window.location.href = this.getH5honePaymentInfo.JSPParam.mweb_url;
          })
          .catch(reason => {
            if (reason.message === '200008') {
              this.queryPhoneOrderInfo();
              this.isorderPay = false;
            } else {
              Dialog.alert({
                title: '错误',
                content: '支付失败',
                confirmText: '确定'
              });
            }
          });
      }
    },
    onActConfirm() {
      localStorage.removeItem(STORAGE_CALLED_PAY);
      localStorage.removeItem(STORAGE_ORDER_NO);
      this.actDialog.open = false;
      Loading.show();
      this.queryPaymentStatus(); // 查询支付状态
    },
    onActCancel() {
      localStorage.removeItem(STORAGE_CALLED_PAY);
      localStorage.removeItem(STORAGE_ORDER_NO);
      this.actDialog.open = false;
    },
    // 查询支付状态
    queryPaymentStatus() {
      let params = {
        type: '1',
        orderNo: this.orderNo
      };
      this.$store
        .dispatch('paymentPhoneStatus', params)
        .then(() => {
          Toast({
            content: '支付成功',
            duration: 2000,
            hasMask: true
          });
          Loading.hide();
          clearInterval(this.PaymentStatusTimer);
          setTimeout(() => {
            this.queryPhoneOrderInfo();
            this.isorderPay = false;
          }, 2000);
        })
        .catch(error => {
          let str = error.toString().split(':');
          let code = str[1].trim();
          let msgText = str[2];
          if (code === '5') {
            // 正在查询支付结果
            Loading.show('正在查询支付结果');
            this.PaymentStatusTimer = setInterval(() => {
              this.queryPaymentStatus();
            }, 5000);
          } else if (code === '2') {
            // 订单未支付
            Toast({
              content: '订单未支付',
              duration: 2000,
              hasMask: true
            });
            Loading.hide();
            clearInterval(this.PaymentStatusTimer);
          } else if (code === '4') {
            // 支付失败
            Toast({
              content: '支付失败',
              duration: 2000,
              hasMask: true
            });
            Loading.hide();
            clearInterval(this.PaymentStatusTimer);
          }
        });
    }
  },
  computed: {
    ...mapGetters(['getPhoneOrderInfoData', 'getWXPaymentInfoData', 'getH5honePaymentInfo', 'getOpenId', 'getToken']),
    userPhone() {
      var str = this.getPhoneOrderInfoData;
      if (!str) {
        return '';
      }
      return decryptByDESModeEBC(str.orderUserPhone);
    },
    orderAmt() {
      var str = this.getPhoneOrderInfoData;
      if (!str) {
        return '';
      }
      return decryptByDESModeEBC(str.orderAmt);
    },
    orderNum() {
      var str = this.getPhoneOrderInfoData;
      if (!str) {
        return '';
      }
      return decryptByDESModeEBC(str.orderNum);
    },
    getstartRoute() {
      var str = this.getPhoneOrderInfoData;
      if (!str) {
        return '';
      }
      if (str.countryStart.split('_')[1].length > 3) {
        return str.countryStart.split('_')[1].substring(0, 3) + '...';
      } else {
        return str.countryStart.split('_')[1];
      }
    },
    getendRoute() {
      var str = this.getPhoneOrderInfoData;
      if (!str) {
        return '';
      }
      if (str.countryEnd.split('_')[1].length > 3) {
        return str.countryEnd.split('_')[1].substring(0, 3) + '...';
      } else {
        return str.countryEnd.split('_')[1];
      }
    },
    getorigin() {
      var str = this.getPhoneOrderInfoData;
      if (!str) {
        return '';
      }
      if (str.originLabel.length > 22) {
        return str.originLabel.substring(0, 22) + '...';
      } else {
        return str.originLabel;
      }
    },
    getdestination() {
      var str = this.getPhoneOrderInfoData;
      if (!str) {
        return '';
      }
      if (str.destLabel.length > 22) {
        return str.destLabel.substring(0, 22) + '...';
      } else {
        return str.destLabel;
      }
    }
  }
};
</script>

<style lang="stylus">
#orderPayment {
  height: 100vh;
  background-color: #fff;

  p {
    display: block;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }

  .md-radio .md-field .md-field-item.md-radio-item .md-field-item-inner {
    padding: 15px;
  }

  .paypwd_box {
    height: 110px;
    border-radius: 10px;
    border: 1px solid #979797;
    margin: 0px 30px;
    margin-top: 50px;
  }

  .paypwd_box li {
    float: left;
    border-right: solid 1px #979797;
    width: 112px;
    height: 110px;
  }

  .paypwd_box li:nth-of-type(6) {
    border-right: none;
  }

  .paypwd_box li span {
    height: 28px;
    width: 28px;
    background-color: #333;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    top: 40px;
    left: 40px;
  }

  .paymoney {
    font-size: 40px;
    color: #333;
    text-align: center;
    padding-top: 84px;
  }

  .orderPayment_box {
    padding-top: 40px;
  }

  .detail-head {
    font-size: 28px;
    color: #333;
    padding: 30px 30px 10px 35px;
  }

  .detail-head b {
    font-weight: 400;
    margin-left: 10px;
  }

  .detail-head em {
    margin: 0px 5px;
  }

  .detail-head span {
    font-size: 20px;
    color: #FF6917;
    border: solid 1px #FF6917;
    padding: 4px 10px;
    margin-left: 20px;
    position: relative;
    bottom: 4px;
    border-radius: 7px;
  }

  .detail_list {
    margin: 0px 30px;
    padding-bottom: 25px;
  }

  .detail_list li {
    font-size: 24px;
    color: #666;
    padding: 10px 0px;
  }

  .detail_list li span {
    margin-left: 12px;
  }

  .detail_hx {
    height: 1px;
    background-color: #E0E0E0;
  }

  .detail_moeny {
    margin: 0px 30px;
    font-size: 24px;
    color: #666;
    height: 80px;
    line-height: 80px;
  }

  .detail_moeny span {
    float: right;
    color: #FF6917;
  }

  .couponhd {
    height: 80px;
    margin: 0px 30px;
    line-height: 80px;
    font-size: 26px;
    color: #666;
  }

  .orderTime {
    text-align: center;
    margin-top: 10px;
    font-size: 26px;
    color: #666;
  }

  .orderTime span {
    color: #FF6917;
  }

  .orderPayBtn {
    width: 94%;
    height: 98px;
    line-height: 98px;
    font-size: 36px;
    text-align: center;
    background-color: #FF6917;
    color: #fff;
    margin: 0px 3% 0px 3%;
    border-radius: 10px;
    position: absolute;
    bottom: 20px;
  }

  .orderPayBtns {
    width: 94%;
    height: 98px;
    line-height: 98px;
    font-size: 36px;
    text-align: center;
    background-color: #FF6917;
    color: #fff;
    margin: 40px 3% 0px 3%;
    border-radius: 10px;
  }

  .md-field-item-title {
    font-size: 26px;
  }

  .md-field-item-content {
    font-size: 26px;
  }

  .shangchedian {
    position: relative;
    width: 16px;
    height: 16px;
  }

  .snkc_xcqx_time {
    position: relative;
    width: 16px;
    height: 16px;
  }

  .xc_question {
    position: relative;
    width: 24px;
    height: 24px;
    left: 10px;
    top: 4px;
  }

  .md-radio-content {
    font-size: 26px;
    color: #666;
  }

  .md-radio-content img {
    width: 44px;
    height: 44px;
    margin-right: 15px;
    position: relative;
    top: 15px;
  }

  .choice-payment-method {
    background-color: #fff;
  }

  .choice-payment-method li {
    padding: 0px 30px;
    font-size: 26px;
    color: #666;
    line-height: 88px;
    height: 88px;
    border-bottom: #e0e0e0 solid 1px;
  }

  .choice-payment-method li img {
    width: 44px;
    height: 44px;
    position: relative;
    top: 12px;
  }

  .choice-payment-method li span {
    margin-left: 20px;
  }

  .choice-payment-method li b {
    float: right;
    color: #999999;
    font-weight: 400;
  }

  .choice-payment-method li b em {
    margin-right: 10px;
    font-style: normal;
  }

  .choice-payment-right {
    display: inline-block;
    background-color: #fff;
    width: 36px;
    height: 36px;
    border: 1px solid #e3e3e3;
    border-radius: 50%;
    position: relative;
    top: 12px;
  }

  .choice-payment-method li b .active {
    background: url('../../assets/imgs/ddzf_icon_pre@2x.png') no-repeat center center;
    background-size: contain;
    border-color: #fff;
    width: 36px;
    height: 36px;
  }

  .surplus_time {
    text-align: center;
    font-size: 28px;
    color: #333;
    padding-top: 40px;
  }

  .surplus_time_number {
    text-align: center;
    font-size: 28px;
    color: #333;
    padding-top: 10px;
  }

  .surplus_time_number span {
    padding: 5px 10px;
    background-color: #D8D8D8;
    margin-left: 10px;
    color: #666;
  }

  .surplus_time_number b {
    margin-left: 10px;
    font-weight: 400;
  }

  .actual_pay {
    text-align: center;
    font-size: 28px;
    color: #333;
    padding-top: 20px;
  }

  .actual_pay span {
    font-size: 40px;
  }

  .order_pay {
    text-align: center;
    font-size: 24px;
    color: #999;
  }

  .coupon_change {
    text-align: center;
    font-size: 24px;
    color: #999;
    padding-top: 20px;
    padding-bottom: 32px;
  }

  .coupon_change b {
    font-weight: 400;
    color: #FF6917;
  }

  .coupon_change span {
    margin-left: 10px;
  }

  .coupon_change span img {
    width: 12px;
    height: 20px;
  }

  .pay_box_ct {
    background-color: #fff;
    padding-bottom: 20px;
  }

  .pay_box_amt_hd {
    font-size: 26px;
    color: #666;
    height: 68px;
    line-height: 68px;
    margin: 0px 30px;
  }

  .pay_box_amt_hd span {
    float: right;
  }

  .pay_box_com {
    font-size: 26px;
    color: #666;
    height: 68px;
    line-height: 68px;
    margin: 0px 30px;
  }

  .pay_box_com span {
    float: right;
    color: #FF6917;
  }

  .pay_box_com span img {
    width: 12px;
    height: 20px;
    margin-left: 5px;
  }

  .pay_box_text {
    font-size: 26px;
    color: #666;
    text-align: center;
  }

  .pay_box_amt {
    font-size: 26px;
    color: #333;
    text-align: center;
    margin-top: 10px;
  }

  .pay_box_amt span {
    font-size: 40px;
    margin-top: 10px;
  }

  .pay_box_cancel {
    height: 48vh;
    overflow-y: auto;
  }

  .pay_box_cancel_hd {
    padding: 10px 30px;
    font-size: 30px;
    color: #333;
  }

  .md-radio-item {
    margin-bottom: 10px;
  }

  .md-icon-circle-right {
    width: 36px;
    height: 36px;
  }

  .md-icon-circle {
    width: 36px;
    height: 36px;
  }
}
</style>
